<template>
  <div>
    <el-table v-loading="loading" :data="datas" style="width: 100%">
      <el-table-column prop="paper_title" label="试卷名称" />
      <el-table-column prop="paper_score" label="总分数" />
      <el-table-column prop="user_score" label="得分" />
      <el-table-column prop="time_takes" label="用时" />
      <el-table-column prop="topic_count" label="题目总数" />
      <el-table-column prop="right_count" label="正确数" />
      <el-table-column prop="commit_time" label="交卷时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="recordDetails(scope)">详情</el-button>
          <el-button type="text" @click="faceData(scope)">人脸数据</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="total > 0" type="flex" justify="end" class="pagination">
      <el-pagination
        :current-page.sync="paginate.page"
        :page-size="paginate.count"
        :page-sizes="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <face-view v-if="faceVisible" :user-id="userId" :scene-key="sceneKey" :scene-id="sceneId" @close="faceVisible = false" />
  </div>
</template>

<script>
import FaceView from '@/pages/user/student/face/FaceView';
import site from '@/site.js'

export default {
  components: {
    FaceView
  },
  data() {
    return {
      response: null,
      loading: true,
      paginate: {
        count: 10,
        page: 1
      },
      pageSize: site.page_sizes,
      faceVisible: false,
      userId: 0,
      sceneKey: 'exam',
      sceneId: 0
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.total;
      }
      return 0;
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    loadData: function() {
      this.$http.get(
        '/exam/admin/user/' + this.$route.params.id + '/answerRecord',
        {
          ...this.paginate
        },
        response => {
          this.response = response.data;
          this.loading = false;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    recordDetails({ row }) {
      const type = {
        1: 'settled',
        2: 'random'
      };
      this.$router.push({ path: '/exam/paper/' + type[row.paper_type] + '/' + row.paper_id + '/record/' + row.id + '/details' });
    },
    faceData({ row }) {
      this.sceneId = row.paper_id;
      this.userId = row.user_id;
      this.faceVisible = true;
    }
  }
};
</script>

<style scoped>
.pagination{
  padding: 20px 0;
}
</style>
